// 1.引入功能需要的基础模块
import {
    ref,
    reactive,
    onMounted,
    onBeforeUnmount
} from "vue"

// 2.定义具备实时获取鼠标坐标点的方法并导出
export default () => {
    // 定义一个获取box实例的变量容器
    let box = ref(null)

    // 1.定义图片需要的坐标数据
    let point = reactive({
        x: 0,
        y: 0
    })

    // 2.监听鼠标移动
    onMounted(() => {
        box.value.addEventListener('mousemove', (info) => {
            point.x = info.clientY
            point.y = info.clientX
        })
    })

    // 3.组件销毁前移除监听
    onBeforeUnmount(() => {
        box.value.removeEventListener('mousemove')
    })



    return {
        box,
        point
    }
}